<template>
  <div
    class="afast-float-button"
    :style="{
      width: `${size}px`,
      height: `${size}px`,
      background: color,
      '--icon-fill-color': iconColor,
    }"
  >
    <MessagePoint
      :color="messagePointColor"
      :text-color="messagePointTextColor"
      :clearable="messagePointClearabel"
      :draggable="messagePointDraggable"
      :bind-counter="bindCounter"
      class="message"
      :size="messagePointSize"
      :class="messagePointPosition"
    ></MessagePoint>
    <AfastIcon :size="size / 2" :name="icon"></AfastIcon>
  </div>
</template>
<script setup lang="ts">
import AfastIcon from "../a/AfastIcon.vue";
import MessagePoint from "../a/MessagePoint.vue";
withDefaults(
  defineProps<{
    bindCounter?: string;
    icon: string;
    color?: Color;
    iconColor?: Color;
    size?: number;
    messagePointPosition?:
      | "righttop"
      | "rightbottom"
      | "lefttop"
      | "leftbottom";
    messagePointSize?: number;
    messagePointDraggable?: boolean;
    messagePointClearabel?: boolean;
    messagePointColor?: Color;
    messagePointTextColor?: Color;
  }>(),
  {
    color: "var(--default-color)",
    iconColor: "var(--default-button-text-color)",
    size: 60,
    messagePointPosition: "lefttop",
    messagePointDraggable: false,
    messagePointClearabel: false,
  }
);
</script>
<style lang="less">
.afast-float-button {
  cursor: pointer;
  position: fixed;
  z-index: 10000;
  border-radius: 100%;
  box-shadow: 1px 1px 10px #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  .message {
    position: absolute;
  }
  .message.righttop {
    top: -5px;
    right: -5px;
  }
  .message.rightbottom {
    bottom: -5px;
    right: -5px;
  }
  .message.lefttop {
    top: -5px;
    left: -5px;
  }
  .message.leftbottom {
    bottom: -5px;
    left: -5px;
  }
}
</style>
